<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body{
				background-image: url(img/29346.jpg);
				background-repeat: no-repeat;
				background-size: 1600px 800px;
			}
			a{
				font-size: 25px;
				color: #ffffff;
			}
			.box{
			
				width: 300px;
				height: 200px;
				background-color: gray;
				text-align: center;
			}
			.box h2{
				color: #FFFFFF;
				
			}
			.box input{
				width: 45px;
				height: 30px;
			}
		</style>
		<script>
			var i =-1
			function changebc(){
				//把图片的路径放入数组里，更图片的路径就可以更换图片
				var arr = ['252786.jpg','255964.jpg','29346.jpg'];
				if(i<arr.length-1){
					i++;
				}else{
					i=0;
				}
				
				document.body.style.backgroundImage="url(img/"+arr[i]+")"
			}
			//改变div样式，从而改变div的位置
			function changove(){
				//获得div对象
				var div= document.getElementById("div_1")
				//改变外边距，从而改变位置
				div.style.marginTop=Math.random()*500+"px";
				div.style.marginLeft=Math.random()*800+"px";
			}
			function changeclk(){
				document.body.style.backgroundImage="url(img/IMG6062141.jpg)";
				//隐藏div盒子
				document.getElementById("div_1").style.display="none";
			}
		</script>
	</head>
	<body>
		<!--本地图片的转换，javascript：方法名		点击了会调用方法-->
		<a href="javascript:changebc()">更换主题</a>
		<div class="box" id="div_1">
			<h2>我是对的</h2>
			<input type="button"  id="" value="是" onclick="changeclk()"/>
			<!--onmouseover   鼠标放上按钮，位置改变-->
			<input type="button" id="" value="否" onmouseover="changove()"/>
		</div>
	</body>
</html>
